<template>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="课程名称" prop="courseName">
            <el-input v-model="form.courseName" placeholder="请输入课程名称" />
        </el-form-item>

        <el-form-item label="课程时长" prop="courseDuration">
            <el-input-number v-model="form.courseDuration" :min="1" placeholder="请输入课程时长" />
        </el-form-item>
        <el-form-item label="课件数量" prop="coursewareCount">
            <el-input-number v-model="form.coursewareCount" :min="1" placeholder="请输入课件数量" />
        </el-form-item>

        <el-form-item label="课程简介" prop="courseIntro">
            <el-input v-model="form.courseIntro" type="textarea" :rows="4" placeholder="请输入课程简介" />
        </el-form-item>

        <el-form-item label="适用人群" prop="targetAudience">
            <el-input v-model="form.targetAudience" type="textarea" :rows="4" placeholder="请输入适用人群" />
        </el-form-item>

        <el-form-item label="学习收获" prop="learningOutcomes">
            <el-input v-model="form.learningOutcomes" type="textarea" :rows="4" placeholder="请输入学习收获" />
        </el-form-item>


        <el-form-item label="订阅须知" prop="subscription">
            <el-input v-model="form.subscription" type="textarea" :rows="4" placeholder="请输入订阅须知" />
        </el-form-item>

        <el-form-item label="阅读量" prop="readCount">
            <el-input-number v-model="form.readCount" :min="1" placeholder="请输入阅读量" />
        </el-form-item>
        <el-form-item label="咨询师ID" prop="consultantId">
            <el-input-number v-model="form.consultantId" :min="1" placeholder="请输入咨询师ID" />
        </el-form-item>

        <el-form-item label="课程价格" prop="money">
            <el-input-number v-model="form.money" :min="1" placeholder="请输入课程价格" />
        </el-form-item>

        <el-form-item label="图片链接" prop="image">
            <el-input v-model="form.image" placeholder="请输入图片链接" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref,defineProps} from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
const props = defineProps({
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

// 表单数据
const form = ref({
    courseName: '',
    courseDuration: null,
    coursewareCount: null,
    courseIntro: '',
    targetAudience: '',
    learningOutcomes: '',
    subscription: '',
    readCount: null,
    consultantId: null,
    money: null,
    image: ''
});
form.value = {...props.form};
// 表单验证规则
const rules = {
    courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
    courseDuration: [{ required: true, message: '请输入课程时长', trigger: 'blur' }],
    coursewareCount: [{ required: true, message: '请输入课件数量', trigger: 'blur' }],
    courseIntro: [{ required: true, message: '请输入课程简介', trigger: 'blur' }],
    targetAudience: [{ required: true, message: '请输入适用人群', trigger: 'blur' }],
    learningOutcomes: [{ required: true, message: '请输入学习收获', trigger: 'blur' }],
    subscription: [{ required: true, message: '请输入订阅须知', trigger: 'blur' }],
    readCount: [{ required: true, message: '请输入阅读量', trigger: 'blur' }],
    consultantId: [{ required: true, message: '请输入咨询师ID', trigger: 'blur' }],
    money: [{ required: true, message: '请输入课程价格', trigger: 'blur' }],
    image: [{ required: true, message: '请输入图片链接', trigger: 'blur' }]
};

const formRef = ref(null);

// 提交表单
const submitForm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            await axios.post("/api/course/update", form.value)
            ElMessage.success('提交成功！');
            // 调用后端 API 或其他处理逻辑
            console.log('表单数据：', form.value);
        } else {
            ElMessage.error('请检查输入内容');
        }
    });
};

// 重置表单
const resetForm = () => {
    formRef.value.resetFields();
};
</script>

<style scoped>
.el-form {
    max-width: 500px;
    margin: 0 auto;
}
</style>